/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Tabs, Tag, Icon, Divider, Modal, Popover, message, Card, Row, Col, DatePicker, Select, TreeSelect,Button  } from 'antd';
import FiltrateUpgrade from '../../../components/common/FiltrateUpgrade';
import Container from '../../../components/common/Container';
import PublicService from '../../../services/PublicService';
import MyModal from '../../../components/common/MyModal';
import request from '../../../utils/request';
import MyTable from '../../../components/common/MyTable';
import MyPagination from '../../../components/common/MyPagination';
import moment from 'moment';
import style from './DeviceDay.less';
const confirm = Modal.confirm;


const buttonWidth = 70;

var dataSource1 = [
    {
        key: '1',
        name: '胡彦斌',
        sex: "西湖区湖",
        birthday: '西湖区湖',
        idNumber: '西湖区湖',
        address: '西湖区',
        phone: '20',
        departmentName: '西湖区湖',
    },
    {
        key: '2',
        name: '胡彦斌2',
        sex: "西湖区湖",
        birthday: '西湖区湖',
        idNumber: '西湖区湖',
        address: '西湖区',
        phone: '20',
        departmentName: '西湖区湖',
    },
    {
        key: '3',
        name: '胡彦斌3',
        sex: "西湖区湖",
        birthday: '西湖区湖',
        idNumber: '西湖区湖',
        address: '西湖区',
        phone: '20',
        departmentName: '西湖区湖',
    }
]
class DeviceDay extends Component {

    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",

            },
            {
                title: '报警时间',
                dataIndex: 'takeTime',
                width: '13%',
                align: "center",
                render: (text, record) => <span>
                    {text}
                    <span style={{ width: 5, height: 20, backgroundColor: record.status == 1 ? "#52c41a" : "#f5222d", position: "absolute", left: 0 }}>
                    </span>
                </span>
            },
            {
                title: '企业',
                dataIndex: 'company',
                width: '6%',
                align: "center",
                render: (text) => <span>{text ? text : '/'}</span>
            },
            {
                title: '燃气站点',
                dataIndex: 'gasStationName',
                width: '10%',
                align: "center",
                render: (text) => <span>{text ? text : '/'}</span>
            },
            {
                title: '报警类型',
                width: '10%',
                dataIndex: 'alarmType',
                align: "center",
            },
            {
                title: '报警详情',
                dataIndex: 'alarmInfo',
                width: '15%',
                align: "center",
            },
            {
                title: '安全责任人',
                dataIndex: 'safetyPerson',
                width: '6%',
                align: "center",
            },
            {
                title: '联系方式',
                dataIndex: 'phone',
                width: '8%',
                align: "center",
            },
            {
                title: '操作',
                dataIndex: 'userName',
                width: '25%',
                align: "center",
                render: (text, record) => {
                    return <span>
                        <Tag color="#40a9ff" onClick={this.showConfirm.bind(this, record)}>短信提醒</Tag>

                        <Divider type="vertical" />

                        <Tag color="rgb(34, 211, 217)" onClick={this.onVideo.bind(this, record)}>调阅视频</Tag>

                        <Divider type="vertical" />

                        <Popover placement="leftBottom"
                            content={
                                record.status == 1 ? "暂无可解除报警" :
                                    <div>
                                        <p style={{ cursor: "pointer" }} onClick={this.OneRelieve.bind(this, record)}>当次报警解除</p>
                                        <p style={{ cursor: "pointer" }} onClick={this.DayRelieve.bind(this, record)}>当天不再报警</p>
                                    </div>
                            }
                            trigger="click">

                            <Tag color={record.status == 1 ? "#52c41a" : "#f5222d"}  >{record.status == 0 ? "解除报警" : "已被解除"}</Tag>

                        </Popover>
                    </span>

                }
            },

        ];

    }
    state = {
        page: 1,
        rows: 10,
        value: [],
        total: 0,
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        status: "",
        treeData:[],
        alarmType:"",
        gasStationName:[],
        endDateStr:null,
        startDateStr:null

    }

    componentDidMount() {
        request({
            url: `/zhrq-web/gas/gaspandect/getGasSiteList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {

                this.setState({
                    treeData: data.ret.list
                })

                setTimeout(() => {
                    console.log(this.state.treeData)
                }, 1000);
            }
        })

        this.onSubmit(1, 10)
    }

    showConfirm = (record) => {

        confirm({
            centered: true,
            style: { top: 200, left: "70vh" },
            title: `收件人 ： ${record.gasStationName} ，  ${record.safetyPerson}`,
            content: `短信内容 ： ${record.gasStationName}于${record.takeTime1}发生报警 ，报警类型 ：${record.alarmType} ，报警详情 ：${record.alarmInfo} ，请尽快解决 。【XX区燃管办】`,
            onOk() {
                return new Promise((resolve, reject) => {

                    setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                    message.success("发送成功")
                }).catch(() => console.log('Oops errors!'));
            },
            onCancel() { },
        });
    }
    //查询按钮
    onSubmit = (page, rows) => {
        this.setState({
            loading: true
        })

    
       
        let data = {
            page, rows,
            alarmType:this.state.alarmType,
            endDateStr:this.state.endDateStr == null?"":moment(this.state.endDateStr).format("YYYY-MM-DD HH:mm:ss"),
            gasStationName:this.state.gasStationName,
            startDateStr:this.state.startDateStr == null?"":moment(this.state.startDateStr).format("YYYY-MM-DD HH:mm:ss"),
            status: this.state.status
        }
        request({
            url: '/zhrq-web/alarm/common/getAlarm',
            method: 'POST',
            data: data
        }).then(data => {

            data.ret.items.forEach((item) => {
                item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm")
                item.takeTime1 = moment(item.takeTime).format("YYYY年MM月DD日HH时mm分ss秒")
                if (item.alarmType == 1) {
                    item.alarmType = '泄露报警'
                }
                if (item.alarmType == 2) {
                    item.alarmType = '库存报警'
                }
            })
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount
                })
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                }, 500)
            }
        })



    }

    //调阅视频按钮
    onVideo = (record) => {
        this.props.history.push('/DeviceVideo');
    }

    //解除报警按钮
    OneRelieve = (record) => {
        request({
            url: `/zhrq-web/alarm/common/updateThisAlarm?id=${record.id}`,
            method: 'GET',
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.onSubmit(1, 10)
                message.success("解除报警成功")
            } else {
                message.warning("解除失败")
            }
        })

    }

    DayRelieve = (record) => {
        console.log(record.takeTime)
        let data = {
            takeTime: record.takeTime,
            gasStationName: record.gasStationName,
            alarmType: record.alarmType
        }
        request({
            url: `/zhrq-web/alarm/common/noSeeThisDayAlarm`,
            method: 'POST',
            data: data
        }).then(data => {
            if (data.rc === 0) {
                this.onSubmit(1, 10)
                message.success("解除报警成功")
            } else {
                message.warning("解除失败")
            }
        })


    }

    //标签筛选功能
    onTag = (status) => {
        this.setState({
            status
        })
        setTimeout(() => {
            this.onSubmit(1, 10)
        }, 500)
    }

    //分页器
    onChangePage = (page, size) => {
        this.onSubmit(page, size);
        this.setState({
            page,
            rows: size,
            pageIndex: page,
            pageSize: size
        })
    };

    //站点选取
    onTreeSelect = (v, b, n) => {
        console.log(v, b, n)
      this.setState({
        value:v,
        gasStationName:b
      })
    }

    //报警选取
    onSelect = (v,b) => {
        console.log(v,b)
        this.setState({
            alarmType:v
        })
    }

    //时间选取狂
    onDatePicker = (v,b,c) => {
        console.log(v,b,c)
        this.setState({
            [v]:b
        })

    }


    render() {
        const { treeData, total, loading, selectedRowKeys, dataSource, pageIndex, pageSize } = this.state
        const columns = this.columns
  

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '73vh';
        if (windowWidth > 1367) {
            containerHeight = '76vh';
        }

        return (
            <div >
                <Card className={style.topCard} bodyStyle={{ padding: 10 }}>

                    <Row style={{ paddingBottom: "-3px" }}>
                        <Col span={10} style={{ lineHeight: 1.5 }}> 报警时间 : <DatePicker value={this.state.startDateStr} size="small" onChange={this.onDatePicker.bind(this,"startDateStr")}/> 到  <DatePicker size="small" value={this.state.endDateStr} onChange={this.onDatePicker.bind(this,"endDateStr")}/> </Col>
                        <Col span={6}>

                            报警类型 : <Select defaultValue="" style={{ width: 120 }} size="small" onChange={this.onSelect}>
                                <Option value="">全部</Option>
                                <Option value="1">泄漏报警</Option>
                                <Option value="2">库存报警</Option>

                            </Select>
                        </Col>
                        <Col span={4}>
                        <Button type="primary" size="small" onClick={this.onSubmit.bind(this,1,10)}>查询</Button>  <Button  size="small">重置</Button>
                        </Col>
                            <Col span={24}><br/></Col>
                        <Col span={10}>

                        站点选取 :    <TreeSelect
                                size="small"
                                style={{ width: 300 }}
                                treeData={treeData}
                                value={this.state.value}
                                onChange={this.onTreeSelect}
                                maxTagCount={2}
                                // treeCheckable={true}
                                // treeCheckStrictly={true}
                                // showCheckedStrategy={TreeSelect.SHOW_CHILD}
                                // searchPlaceholder: 'Please select',
                                // treeDefaultExpandAll={true}
                                treeCheckable={true}
                                treeDataSimpleMode={true}

                            />
                        </Col>
                        
                    </Row>


                </Card>
                <Container
                    style={{ height: containerHeight, position: "relative" }}
                    exportBtnShow={true}
                    exportBtn={this.exportBtn}
                // addBtnText={this.addBtnText}
                // examineBtn={this.examineBtn}
                // editBtn={this.editBtn}
                // lockBtn={this.lockBtn}
                // clearlockBtn={this.clearlockBtn}
                // setDelConfirm={this.setDelConfirm}
                // addBtnShow={true}
                // deleteBtnShow={true}
                // editBtnShow={true}
                // examineBtnShow={true}
                // lockBtnShow={true}
                // clearlockBtnShow={true}
                >
                    <div className={style.Con_header}>
                        <Tag color={this.state.status === "" ? "#108ee9" : "blue"} onClick={this.onTag.bind(this, "")}>全部</Tag>
                        <Tag color={this.state.status === 0 ? "#fc1808" : "red"} onClick={this.onTag.bind(this, 0)}>未解除</Tag>
                        <Tag color={this.state.status === 1 ? "#52c41a" : "green"} onClick={this.onTag.bind(this, 1)}>已解除</Tag>
                    </div>
                    <div style={{ height: "62vh", overflow: "auto" }}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={columns}
                            // rowSelection={rowSelection}
                            pagination={false}
                            // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />
                </Container>
            </div>
        )
    }
}
export default (DeviceDay);
